<template>
  <a-form
    :form="form"
    :label-col="{ span: 5 }"
    :wrapper-col="{ span: 12 }"
    @submit="handleSubmit"
  >
    <a-form-item label="command">
      <a-input
        v-decorator="[
          'command',
          {
            initialValue: command.command,
            rules: [{ required: true, message: 'Please input your command!' }],
          },
        ]"
      />
    </a-form-item>
    <a-form-item label="tips">
      <a-input
        v-decorator="[
          'tips',
          { rules: [{ required: true, message: '请输入命令提示' }] },
        ]"
      />
    </a-form-item>
    <a-form-item label="消息类型">
      <a-select
        v-decorator="[
          'parseType',
          { rules: [{ required: true, message: '请选择一个消息类型' }] },
        ]"
        placeholder="选择一个消息类型"
        @change="handleSelectChange"
      >
        <a-select-option value="0"> 普通文本 </a-select-option>
        <a-select-option value="1"> html </a-select-option>
        <a-select-option value="1"> markDown </a-select-option>
        <a-select-option value="3"> price </a-select-option>
      </a-select>
    </a-form-item>

    <a-form-item label="回复内容">
      <a-textarea
        v-decorator="[
          'content',
          { rules: [{ required: true, message: '请选择一个消息类型' }] },
        ]"
        placeholder="Basic usage"
        :rows="4"
      />
    </a-form-item>

    <a-form-item label="id" hidden>
      <a-input v-decorator="['id', { rules: [{ required: false }] }]" hidden />
    </a-form-item>

    <a-form-item :wrapper-col="{ span: 12, offset: 5 }">
      <a-button type="primary" html-type="submit"> Submit </a-button>
    </a-form-item>
  </a-form>
</template>

<script>
import axios from "axios";
var config = {
  headers: {
    "Access-Control-Allow-Origin": "*",
    "Content-Type": "application/json",
  },
};
const submitData = (params) => {
  console.log(params);
  return axios.post('http://portal.btmxpro.com:8888/bot/server/command', params, config);
};

const getCommand = (params) => {
  console.log(params);
  let serverPath='http://portal.btmxpro.com:8888/bot/server/command/'+ params;
  return axios.get(serverPath, config);
};

export default {
  name: "CommandEdit",
  data() {
    return {
      formLayout: "horizontal",
      form: this.$form.createForm(this, { name: "coordinated" }),
      command: { value: "abc" },
    };
  },
  mounted() {
    this.loadData();
  },
  methods: {
    loadData() {
      let commandId = this.$route.query.id;
      console.log(commandId);
      if (!commandId) {
        return;
      }
      getCommand(commandId).then(
        function (response) {
          console.log(response);
          this.command = response;
          console.log("------------------------");
          console.log(this.form);
          this.form.setFieldsValue({
            id: response.data.id,
            command: response.data.command,
            tips: response.data.tips,
            content: response.data.content,
            parseType: response.data.parseType,
          });
          console.log("------------------------");
          // this.form.setFieldsValue({
          //   command: `abc`,
          // });
        }.bind(this)
      );
    },
    test() {},
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log("Received values of form: ", values);
          values["status"] = 1;
          values["parseType"] = new Number(values["parseType"]);
          // values["id"] = new Number(values["id"]);
          submitData(values)
            .then(
              function (response) {
                this.$message.info("保存成功");
                console.log(response);
                console.log(this);
                this.$router.push({
                  path: "/comamnds",
                });
              }.bind(this)
            )
            .catch(function (error) {
              console.log(error);
              this.$message.error("保存失败,请检查command是否重复");
            }.bind(this));
        }
      });
    },
    handleSelectChange(value) {
      console.log(value);
      this.form.setFieldsValue({
        note: `Hi, ${value === "male" ? "man" : "lady"}!`,
      });
    },
  },
};
</script>